{% extends 'admin/_base.html' %}

{% block title %} site {% endblock %}


{% block main_content %}
<div id="info" class="manage">
    <h1>信息管理</h1>
    <form method="POST" enctype="multipart/form-data">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        <div class="manage-item">
            <div>上传图片</div>
            <input type="file" name="url_image">
            <div>图片介绍</div>
            <textarea name="desc_image" id="" cols="30" rows="5"></textarea>
        </div>
        <div class="manage-item">
            <div>上传视频</div>
            <input type="file" name="url_video">
            <div>视频介绍</div>
            <textarea name="desc_video" id="" cols="30" rows="5"></textarea>
        </div>

        <div class="submit">
            <input type="submit" value="提交">
        </div>
        <input type="text" hidden name="rand" id="" value="{{rand}}">
    </form>


    <style>
        .list {
            margin: 10px;
        }

        .list img {
            width: 30%;
        }


        .list video {
            width: 30%;
        }

        .video {
            position: relative;
        }

        .list button {
            position: absolute;
            left: 0;
            top: 0;
        }

        .list button.del{
            left: 40px;
        }

        @media (max-width:420px) {
            .list img {
                width: 100%;
            }

            .list video {
                width: 100%;
            }
        }
    </style>
    
    <div class="video list">
        <div class="title">视频列表</div>
        {% for video in video_list %}
        <span class="video">
            <video id="video-{{video.id}}" src="{{video.url}}" alt="{{ video.desc }}" onclick="clickCopy(this)" title="点击复制链接"></video>
            <button style="width: 36px;">播放</button>
            <button class="del" onclick="del('video',{{video.id}})" style="width: 36px;">删除</button>
        </span>
        {% endfor %}

        <script>
            let video_list = document.querySelectorAll(".video")
            for (let i = 0; i < video_list.length; i++) {
                let f = true
                let b = video_list[i].querySelector("button")
                b.addEventListener("click", function (e) {
                    if (f) {
                        video_list[i].querySelector("video").play()
                        b.innerText = "暂停"
                        f = false
                    } else {
                        video_list[i].querySelector("video").pause()
                        b.innerText = "播放"
                        f = true
                    }
                })
            }
        </script>
    </div>
    <hr>
    <div class="list">

        <div class="title">图片列表</div>
        {% for img in img_list %}
        <span style="position: relative;">
            <img id="img-{{img.id}}" src="{{img.url}}" alt="{{ img.desc }}" onclick="clickCopy(this)" title="点击复制链接">
        <button class="del" onclick="del('img',{{img.id}})" style="width: 36px; left: 0;">删除</button>
        </span>
        {% endfor %}
        <script>
            function clickCopy(e) {
                let textarea = document.createElement('textarea')
                textarea.value = e.src
                document.body.appendChild(textarea)
                textarea.select()
                document.execCommand("copy")
                textarea.remove()
            }
        </script>
    </div>
    <script>
        function del(type, id){
            let f = window.confirm("确定要删除？")
            if (f){
                console.log(type, id, f);
                let xhr = new XMLHttpRequest()
                xhr.open("DELETE", "./info", false)
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token() }}")
                xhr.send(JSON.stringify({
                    "type":type,
                    "id":id
                }))
                if (JSON.parse(xhr.responseText).data){
                    document.getElementById(type+"-"+id).parentNode.remove()
                    window.location.reload()
                }
            }else{
                console.log("取消删除");
            }
        }
    </script>
</div>
{% endblock %}